<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { province } from '@/assets/map.js'
import { useUserStore } from '@/stores/userStore'
import { trigger } from '@vue/reactivity'


let userInfo = useUserStore().userInfo
const userStore = useUserStore()
const route = useRouter();
onMounted(() => {
    if (userInfo.code != true) route.replace({ path: '/' })
})

// 对话框visiable
const dialog = ref({
    adress: 0,
    name: 0,
    password: 0,
    telephone: 0
})

//表单验证规则
const rules = {
    name: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 1, max: 10, message: '用户名过长(超过10个字符)', trigger: 'blur' }
    ],
    oldpwd: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 14, message: '密码长度为6-14', trigger: 'blur' }
    ],
    newpwd: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 14, message: '密码长度为6-14', trigger: 'blur' }
    ],
    ckpwd: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 14, message: '密码长度为6-14', trigger: 'blur' }
    ],

    telephone: [
        { required: true, message: '电话号码不能为空', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入正确的电话号码格式', trigger: 'blur' }
    ]

}

//姓名表单
const nameForm = ref({
    name: userInfo.data.uname
})
//修改密码表单
const pwdForm = ref({
    oldpwd: "",
    newpwd: "",
    ckpwd: ""
})
//电话表单
const telForm = ref({
    telephone: ""
})
//修改地址表单
// 地区列表
const areaList = ref({
    province: province,
    city: null,
    region: null
})
// 地区选择
const areaSelected = ref({
    province: null,
    city: null,
    region: null,
    full: null
})
const nameFormRef = ref(null)
const pwdFormRef = ref(null)
const telFormRef = ref(null)
const adrFormRef = ref(null)
//提交数据
const submit = async () => {
    // await userStore.submitUserInfo(userInfo)

    // ElMessage({ type: "success", message: "修改成功" })
}
//修改姓名
const modifyName = async () => {
    const name = nameForm.value.name;
    nameFormRef.value.validate(async (valid) => {
        if (valid == true) {
            userStore.updateUserUname(userInfo.data.uid, name);
            userInfo = userStore.userInfo;
            dialog.value.name = 0;
            ElMessage({ type: 'success', message: '修改成功' })
        }
    })
}
const modifyTel = async () => {
    const telephone = telForm.value.telephone;
    telFormRef.value.validate(async (valid) => {
        if (valid == true) {
            await userStore.updateUserTelephone(userInfo.data.uid, telephone)
            userInfo = userStore.userInfo;
            dialog.value.telephone = 0;
            ElMessage({ type: 'success', message: '修改成功' })
        }
    })
}
//修改密码
const modifyPwd = async () => {
    // console.log(pwdForm.value.newpwd);
    pwdFormRef.value.validate(async (valid) => {

        if (valid == true) {
            if (pwdForm.value.newpwd == pwdForm.value.ckpwd) {
                const res = await userStore.updateUserPwd(userInfo.data.uid, pwdForm.value.oldpwd, pwdForm.value.newpwd)
                // console.log(res);
                if (res == 1) {
                    ElMessage({ type: "success", message: "修改成功" })
                    dialog.value.password = 0;
                }
                else ElMessage({ type: 'error', message: '密码错误' })


            }
            else ElMessage({ type: "info", message: "修改密码前后不一致" })
        }
    })
}
//修改地址
const modifyAddress = async () => {
    let res = "";
    res = res.concat("", areaSelected.value.province);
    res = res.concat("", areaSelected.value.city);
    res = res.concat("", areaSelected.value.region);
    res = res.concat("", areaSelected.value.full);
    await userStore.updateUserAddress(userInfo.data.uid, res);
    userInfo = userStore.userInfo;
    dialog.value.adress = 0;
}
</script>
<template>
    <el-container style="width: 1200px;height: 600px;margin: 0px auto; ">

        <el-header
            style="text-align: center; border-top-right-radius: 5px;border-top-left-radius: 5px; background-color: black;padding: 0px;height: 50px;color:#cdcdcd;">
            <el-link :underline="false" style="position:fixed;top:20px;left: 20px;"
                @click="route.replace({ path: '/home' })">&lt;首页</el-link>
            <p style="display: inline-block;margin-block-start: 11px;margin-block-end: 0;">
                个人信息
            </p>
        </el-header>
        <el-main style="width: 800px;margin: 0px auto;">

            <el-descriptions title="" size="large" column="2" :border="true" style="box-shadow:0 10px 5px 5px #cdcdcd ;">
                <!-- 呢称 -->
                <el-descriptions-item label="呢称：">
                    <el-link @click="dialog.name = 1" :underline="false">{{ userInfo.data.uname }}</el-link>
                    <el-dialog v-model="dialog.name" title="修改呢称" width="200px">
                        <el-form :rules="rules" ref="nameFormRef" :model="nameForm">
                            <el-form-item prop="name" label="">
                                <el-input v-model="nameForm.name"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width: 180px;" type="primary" @click="modifyName">确定</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </el-descriptions-item>
                <!-- 账号： -->
                <el-descriptions-item label="账号：">
                    {{ userInfo.data.uid }}
                </el-descriptions-item>

                <!-- 密码： -->
                <el-descriptions-item label="密码：">
                    <el-link @click="dialog.password = 1" :underline="false">********</el-link>
                    <el-dialog v-model="dialog.password" title="修改密码" width="400px">
                        <el-form :rules="rules" ref="pwdFormRef" :model="pwdForm" label-width="100px">
                            <el-form-item prop="oldpwd" label="旧密码：">
                                <el-input type="password" show-password v-model="pwdForm.oldpwd"></el-input>
                            </el-form-item>
                            <el-form-item prop="newpwd" label="新密码：">
                                <el-input type="password" show-password v-model="pwdForm.newpwd"></el-input>
                            </el-form-item>
                            <el-form-item prop="ckpwd" label="确定密码：">
                                <el-input type="password" show-password v-model="pwdForm.ckpwd"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="modifyPwd">确定</el-button>
                                <el-button @click="dialog.password = 0">取消</el-button>
                            </el-form-item>

                        </el-form>

                    </el-dialog>
                </el-descriptions-item>
                <!-- 手机号码： -->
                <el-descriptions-item label="手机号码：">
                    <el-link @click="dialog.telephone = 1" :underline="false">
                        {{ userInfo.data.telephone == null || userInfo.data.telephone.length == 0 ? "<点击添加电话号码>" :
                            userInfo.data.telephone
                        }}</el-link>
                    <el-dialog v-model="dialog.telephone" title="修改手机号码" width="200px">
                        <el-form :rules="rules" ref="telFormRef" :model="telForm">
                            <el-form-item prop="telephone" label="">
                                <el-input v-model="telForm.telephone"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width: 180px;" type="primary" @click="modifyTel">确定</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </el-descriptions-item>
                <!-- 收货地址： -->
                <el-descriptions-item label="收货地址：">
                    <el-link @click="dialog.adress = 1" :underline="false">
                        {{ userInfo.data.address == null || userInfo.data.address.length == 0 ? "<点击补充收货地址>" :
                            userInfo.data.address }}
                    </el-link>
                    <!-- 修改地址 -->
                    <el-dialog v-model="dialog.adress" title="修改收货地址" width="400px">
                        <!-- 选择省份 -->
                        <el-select v-model="areaSelected.province" placeholder="请选择省份市区">
                            <el-option v-for="it in areaList.province" :value="it.name"
                                @click="areaList.city = it.children"></el-option>
                        </el-select>

                        <!-- 选择市 -->

                        <el-select v-model="areaSelected.city"
                            :disabled="areaSelected.province == null || areaSelected.province.length == 0"
                            placeholder="请选择市区">
                            <el-option v-for="it in areaList.city" :value="it.name"
                                @click="areaList.region = it.children"></el-option>
                        </el-select>

                        <!-- 选择县区 -->

                        <el-select v-model="areaSelected.region"
                            :disabled="areaSelected.city == null || areaSelected.city.length == 0" placeholder="请选择县区">
                            <el-option v-for="it in areaList.region" :value="it.name"></el-option>
                        </el-select>

                        <!-- 填写详细地址 -->
                        <el-input style="width: 300px;margin:20px;" v-model="areaSelected.full"
                            :disabled="areaSelected.region == null || areaSelected.region.length == 0"
                            placeholder="请补充详细地址"></el-input>

                        <el-button style="margin:20px;" type="primary"
                            :disabled="areaSelected.full == null || areaSelected.full.length == 0"
                            @click="modifyAddress()">确定</el-button>
                    </el-dialog>
                </el-descriptions-item>
            </el-descriptions>
            <el-button style="display: block;width: 100px;height: 50px;box-shadow:0 10px 5px 5px #cdcdcd ;margin:20px auto;"
                size="large" @click="route.replace({ path: '/userLogin' })">切换账号</el-button>

        </el-main>
    </el-container>
</template>
<style scoped>
.el-select {
    margin: 20px;
    width: 300px;
}
</style>